<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<if expr="is_android">
<meta name="viewport" content="width=device-width">
</if>
<script type="module" src="net_export.js"></script>
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="net_export.css">
<link rel="icon" id="fav-icon">
<title>Network Log Export</title>
</head>
<body>
  <div id="main-container">
    <!--
      =========================================================================
      View for "unitialized" state.
       * Only visible briefly, if at all
      =========================================================================
    -->
    <div id="state-uninitialized">
      <h2>Network Log Export</h2>
      Loading...
    </div>

    <!--
      =========================================================================
      View for "initial" state.
       * Has controls to start logging.
      =========================================================================
    -->
    <div id="state-initial" hidden>
      <h2>Capture Network Log</h2>
      <button id="start-logging">Start Logging to Disk</button>

      <div class="section-container">
        Click the button to start logging future network activity to a file on
        disk.
        <if expr="not(is_ios)">
        The log includes details of network activity from all of Chrome,
        including incognito and non-incognito tabs, visited URLs, and
        information about the network configuration.
        </if>
        <if expr="is_ios">
        The log includes details of network activity handled by Chrome's
        internal network stack. Note, this does not include network requests
        for ordinary web content, which are instead handled by WKWebView.
        </if>
        <a href="https://dev.chromium.org/for-testers/providing-network-details"
           target="_blank">
        See the Chromium website for more detailed instructions</a>.
      </div>

      <div class="outline-box">
        <b>OPTIONS</b>:
        <span class="warning">This section should normally be left alone.</span>
        <div class="radio-button-div">
          <label>
            <input id="strip-private-data-button" type="radio"
                   name="log-mode" value="STRIP_PRIVATE_DATA" checked>
            Strip private information
          </label>
        </div>
        <div class="radio-button-div">
          <label>
            <input id="include-private-data-button" type="radio"
                   name="log-mode" value="NORMAL">
            Include cookies and credentials
          </label>
        </div>
        <div class="radio-button-div">
          <label>
            <input id="log-bytes-button" type="radio"
                   name="log-mode" value="LOG_BYTES">
            Include raw bytes (will include cookies and credentials)
          </label>
        </div>
        <div>
          <label>
            Maximum log size (megabytes):
            <input id="log-max-filesize" type="number" min="0" step="5" />
            (Blank means unlimited)
          </label>
        </div>
      </div>
    </div>

    <!--
      =========================================================================
      View for "logging" state.
       * Shows that logging is in progress
       * Has controls to stop logging
      =========================================================================
    -->
    <div id="state-logging" hidden>
      <h2>Saving network events to disk...</h2>

      <button id="stop-logging">Stop Logging</button>

      <div class="section-container">
        <p>Reproduce the network problem now using another tab. When you are
        done, return to this page and click the Stop button.</p>

        <p>All of your browser's networking activity will be written to the log
        file until you either click the Stop button, or close this tab.</p>
      </div>

      <div class="outline-box">
        <b>FILE:</b> <span id="file-path-logging"></span> <br/>
        <b>OPTIONS:</b> <span id="capture-mode-logging"></span>
      </div>
    </div>

    <!--
      =========================================================================
      View for "stopped" state.
       * Shows where the log file was saved to
       * Has controls to email the log (mobile)
      =========================================================================
    -->
    <div id="state-stopped" hidden>
      <h2>Log file written</h2>

      <if expr="is_ios or is_android">
      <button id="mobile-email">Email Log</button>
      </if>

      <if expr="not(is_ios or is_android)">
      <button id="show-file">Show File</button>
      </if>

      <button id="startover">
        Start Over
      </button>

      <div class="section-container">
        <if expr="is_ios or is_android">
        Share the log by emailing it, and you are done!
        </if>

        <if expr="not(is_ios or is_android)">
        <p>Attach the log file to your bug report, and you are done!</p>

        <p>
          If the file is too big, it can be compressed or truncated.
          <a href="#" id="toobig-read-more-link">Read more...</a>
        </p>

        <div id="toobig-read-more">
          <ul>
            <li>The maximum log size can be specified when starting
            logging.</li>
            <li>Compressing the log file before attaching is a good
              idea.</li>
            <li>Capture logs over a shorter period of time; stop
              logging once the issue has reproduced.</li>
            <li>Existing log files can be shrunk using
              <a
                href="https://chromium.googlesource.com/chromium/src/+/main/net/tools/truncate_net_log.py"
                target="_blank">
                net/tools/truncate_net_log.py</a>.</li>
          </ul>
        </div>
        </if>
      </div>

      <!-- TODO(eroman): This is duplicated with the logging state -->
      <div class="outline-box">
        <b>FILE:</b> <span id="file-path-stopped"></span> <br/>
        <b>OPTIONS:</b> <span id="capture-mode-stopped"></span>
      </div>

      <div class="section-container">
        The log file can be loaded using the
        <a href="https://netlog-viewer.appspot.com/"
           target="_blank">netlog_viewer</a>.
      </div>

      <div class="section-container">
        <b><span class="warning">PRIVACY</span></b>: Be aware when
        sharing your network logs that they may contain private information. At
        a minimum, they list the URLs and hostnames of sites visited while
        logging was enabled.
        <a href="#" id="privacy-read-more-link">Read more...</a>

        <div id="privacy-read-more">
          <ul>
            <li>There may be some cached hostnames/URLs from sites visited prior
              to enabling logging.</li>
            <li>Logs may contain information about your networking environment,
              such as the proxy configuration used.</li>
            <li>The default logging options do a <i>best-effort</i> stripping of
              any cookies/credentials in the logged requests.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
